﻿@using Kendo.Mvc.UI
@model TelerikedIn.WebApp.ViewModels.Account.UpdateProfileVM

<div>
    <div class="up-cont">
        <div class="mar thumbnail">
            @Helpers.GetImage(Model.Image)
        </div>
        @(Html.Kendo().Upload()
            .Name("image-file-upload")
            .Multiple(false)
            .ShowFileList(true)
            .Messages(m => m.Select("Change picture"))
            .Async(a =>
            {
                a.AutoUpload(true);
                a.SaveUrl("~/Profile/UploadPhoto?id=" + Model.Id);
                a.RemoveUrl("3");
            })
            .Events(ev =>
            {
                ev.Error("errorHandler");
                ev.Success("updatePicture");
                //ev.Upload("beforeUpload");
            })
        )
    </div>    
    <p><span id="update-profile-result"></span></p>
</div>

@using (Ajax.BeginForm("Update", new { Id = Model.Id }, new AjaxOptions
{
    HttpMethod = "Post",
    UpdateTargetId = "update-profile-result",
    OnSuccess = "clearValidation"
}))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary("Errors in form:", new { id = "validation-summary" });

    <div class="form-horizontal">
        <div class="control-group">
            @Html.LabelFor(m => m.FirstName, new { @class = "control-label" })
            <div class="controls">
                @Html.EditorFor(m => m.FirstName)
            </div>
        </div>

        <div class="control-group">
            @Html.LabelFor(m => m.LastName, new { @class = "control-label" })
            <div class="controls">
                @Html.EditorFor(m => m.LastName)
            </div>
        </div>

        <div class="control-group">
            @Html.LabelFor(m => m.Country, new { @class = "control-label" })
            <div class="controls">
                @Html.EditorFor(m => m.Country)
            </div>
        </div>

        <div class="control-group">
            @Html.LabelFor(model => model.City, new { @class = "control-label" })
            <div class="controls">
                @Html.EditorFor(m => m.City)
            </div>
        </div>

        <div class="control-group">
            @Html.LabelFor(model => model.Education, new { @class = "control-label" })
            <div class="controls">
                @Html.EditorFor(m => m.Education)
            </div>
        </div>

        <div class="form-actions">
            <input type="submit" value="Update" class="btn btn-success" />
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryajax")
}

<script>
    var messageContainer = $(function () {
        return $("#update-profile-result");
    }());

    function clearValidation() {
        $("#validation-summary").html("");
    }

    function errorHandler(data, request, files) {
        clearValidation();
        messageContainer.html("<span class='text-error'> The picture did not upload! " + data.XMLHttpRequest.response + "</span>");
    }

    function updatePicture() {
        clearValidation();
        location.reload();
    }

    function beforeUpload(data) {

        messageContainer.html("");
        var file = data.files[0];

        var fileExt = file.extension;
        var fileSize = file.size / (1024);

        if (fileExt != ".png" && fileExt != ".jpg" || fileSize > 100) {
            $(".k-file:has([title='" + file.name + "']) .k-cancel").click();
            messageContainer.html("<span class='text-error'> File must be .png or .jpg. And smaller than 200KB!</span>");
        }
    }
</script>
